<template>
  <div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header">质检规则配置</div>

      <el-form :model="queryParams">
        <el-row>
          <el-col :span="6">
            <el-form-item prop="aaaa" label="">
              <el-date-picker v-model="queryParams.aaaa" style="width: 100%;"
                @change="(val) => dateChange(val, { fileBytes: ['acptBgnDate', 'acptEndDate'] }, 'queryParams')"
                :editable="false" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="生效日期"
                end-placeholder="失效日期" size="small" class="item-width">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="bbbb" label="">
              <el-select v-model="queryParams.bbbb" clearable filterable placeholder="规则状态" style="width: 100%;">
                <el-option v-for="item in bbbbList" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="cccc" label="">
              <el-date-picker v-model="queryParams.cccc" style="width: 100%;" :editable="false" type="date"
                format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="规则更新时间" size="small" class="item-width">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <div style="display: inline-block;float: right;">
                <el-button type="primary" @click="search" size="mini">查询
                </el-button>
                <el-button type="info" plain @click="resetQuery" size="mini">重置
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <Card>
      <el-button @click="dialogVisible = true" icon="el-icon-plus" type="primary" size="mini">录入规则</el-button>
      <el-table v-loading="loading" :data="tableList" style="width: 100%;margin-top: 20px;">
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column label="质检规则名称" align="center" prop="aaaa" width="140" />
        <el-table-column label="质检要素" align="center" prop="bbbb" min-width="150" />
        <el-table-column label="规则有效区间" align="center" prop="cccc" min-width="150" />
        <el-table-column label="更新时间" align="center" prop="dddd" width="110" />
        <el-table-column label="更新人员" align="center" prop="eeee" width="100" />
        <el-table-column label="状态" align="center" fixed="right">
          <template slot-scope="scope">
            <!--  active-text="按月付费" inactive-text="按年付费" -->
            <el-switch v-model="scope.row.ffff"></el-switch>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </Card>

    <el-dialog :visible.sync="dialogVisible" title="规则录入" width="750" append-to-body destroy-on-close
      :close-on-click-modal="false">
      <el-form :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="vvvv" label="质检规则名称">
              <el-input v-model="form.vvvv" placeholder="请输入内容" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="wwww" label="规则有效期">
              <el-date-picker v-model="form.wwww" style="width: 100%;"
                @change="(val) => dateChange(val, { fileBytes: ['acptBgnDate', 'acptEndDate'] }, 'form')"
                :editable="false" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="生效日期"
                end-placeholder="失效日期" size="small" class="item-width">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="3">
            <el-form-item label-width="0">
              <el-button @click="showTrans = true" type="text" size="mini">规则自定义</el-button>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>

      <!-- 选择列表中要展示的规则 -->
      <el-transfer v-model="checkedList" @change="handleChange" style="text-align: left; display: inline-block"
        :titles="['规则列表', '请设置已选规则系数']" :format="{ noChecked: '${total}', hasChecked: '${checked}/${total}' }"
        :data="transData" class="trans-cla">
        <!--  -->
        <div slot-scope="{ option }" class="flex-box"
          style="position: absolute;justify-content: space-between;width: 320px;">
          <span>{{ option.label }}</span>
          <!-- {{ aaa(option) }} -->
          <!--  style="width: 100%;" -->
          <div v-if="option.showDom">
            <el-select v-if="option.type == 'select'" v-model="form[option.model]" clearable filterable placeholder="请选择"
              style="width: 200px;right: 15px;">
              <el-option v-for="item in option.opt" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
            <el-input-number v-if="option.type == 'num'" v-model="form[option.model]" clearable :min="option.min"
              :max="option.max" label="请输入" style="width: 200px;right: 15px;" />

            <el-date-picker v-if="option.type == 'month'" v-model="form[option.model]" clearable :editable="false"
              type="month" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择" size="small" class="item-width"
              style="width: 200px;right: 15px;">
            </el-date-picker>
          </div>
        </div>

        <!-- <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
        <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button> -->
      </el-transfer>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'RuleConf',
  data() {
    return {
      // type: select,cascader,input,date,num,
      //  opt:'sex', multiple:false, fileBytes: ['releaseStartDate', 'releaseEndDate']
      transData: [
        { key: 1, label: '续收层级', model: "aaaa", opt: [{ value: '1', label: '1层' }, { value: '2', label: '2层' }], type: 'select', },
        { key: 2, label: '交次', model: "bbbb", opt: [{ value: '1', label: '1次' }, { value: '2', label: '2次' }], type: 'select', },
        { key: 3, label: '代理人级别', model: "cccc", opt: [{ value: '1', label: '1级' }, { value: '2', label: '2级' }], type: 'select', },
        { key: 4, label: '保费', model: "dddd", type: 'num', },
        { key: 5, label: '服务阶段', model: "eeee", opt: [{ value: '1', label: '1阶段' }, { value: '2', label: '2阶段' }], type: 'select', },
        { key: 6, label: '任务类型', model: "ffff", opt: [{ value: '1', label: '应交前' }, { value: '2', label: '应交期' }, { value: '3', label: '前瞻期' }, { value: '4', label: '失效件' }], type: 'select', },
        { key: 7, label: '继续率区间', model: "gggg", opt: [{ value: '1', label: '0~10%' }, { value: '2', label: '11%~20%' }], type: 'select', },
        { key: 8, label: '预估收费结果', model: "hhhh", opt: [{ value: '1', label: '延期收费' }, { value: '2', label: '按期收费' }], type: 'select', },
        { key: 9, label: '面访次数', model: "iiii", opt: [{ value: '1', label: '1次' }, { value: '2', label: '2次' }], type: 'select', },
        { key: 10, label: '服务方式', model: "jjjj", opt: [{ value: '1', label: '面访' }, { value: '2', label: '电话' }], type: 'select', },
        { key: 11, label: '服务次数', model: "kkkk", opt: [{ value: '1', label: '1次' }, { value: '2', label: '2次' }], type: 'select', },
        { key: 12, label: '按任务数', model: "llll", type: 'num', },
        { key: 13, label: '按任务比', model: "mmmm", type: 'num', },
        { key: 14, label: '客户满意度', model: "nnnn", opt: [{ value: '1', label: '满意' }, { value: '2', label: '十分满意' }], type: 'select', },
        { key: 15, label: '商机识别', model: "oooo", opt: [{ value: '1', label: '跟进' }, { value: '2', label: '丢弃' }], type: 'select', },
        { key: 16, label: '服务人员品质', model: "pppp", opt: [{ value: '1', label: '好' }, { value: '2', label: '很好' }], type: 'select', },
        { key: 17, label: '机构品质', model: "qqqq", opt: [{ value: '1', label: '1级' }, { value: '2', label: '2级' }], type: 'select', },
        { key: 18, label: '应交年月', model: "rrrr", type: 'month', },
        { key: 19, label: '服务评价', model: "ssss", opt: [{ value: '1', label: '好' }, { value: '2', label: '很好' }], type: 'select', },
        { key: 20, label: '未收原因', model: "tttt", opt: [{ value: '1', label: '关机' }, { value: '2', label: '未接通' }], type: 'select', },
        { key: 21, label: '主管陪访', model: "uuuu", opt: [{ value: '1', label: '是' }, { value: '2', label: '否' }], type: 'select', },
      ],
      queryParams: {},
      form: {},
      total: 4,
      bbbbList: [],
      checkedList: [],
      loading: false,
      tableList: [{
        aaaa: '大额件质检规则', bbbb: '保费、收费交次、代理人类别、按任务占比', cccc: '2023-01-01至2023-08-20',
        dddd: '2023-01-01', eeee: '张三', ffff: true,
      }, {
        aaaa: '大额件质检规则', bbbb: '保费、收费交次、代理人类别、按任务占比', cccc: '2023-01-01至2023-08-20',
        dddd: '2023-01-01', eeee: '张三', ffff: true,
      }, {
        aaaa: '大额件质检规则', bbbb: '保费、收费交次、代理人类别、按任务占比', cccc: '2023-01-01至2023-08-20',
        dddd: '2023-01-01', eeee: '张三', ffff: true,
      }, {
        aaaa: '大额件质检规则', bbbb: '保费、收费交次、代理人类别、按任务占比', cccc: '2023-01-01至2023-08-20',
        dddd: '2023-01-01', eeee: '张三', ffff: true,
      },],
      dialogVisible: false,
      // showTrans: true,
    }
  },
  methods: {
    search() { },
    resetQuery() { },
    getList() { },
    handleChange(value, direction, movedKeys) {
      movedKeys.forEach(key => this.transData.some(trans => trans.key == key && (trans.showDom = direction == 'right' ? true : false)))
    },
    aaa(option) {
      console.log(option);
    },
    // range 日期change事件
    dateChange(val, item, str) {
      val = val || ["", ""];
      item.fileBytes.forEach((fileByte, index) =>
        this.$set(this[str], fileByte, val[index])
      );
    },
  }
}
</script>
<style lang="less" scoped>
.trans-cla /deep/ .el-checkbox__label {
  font-size: 12px;
}

.flex-box {
  display: flex;
  // justify-content: space-between;
}
</style>
<style lang="less">
.trans-cla>.el-transfer-panel:first-child {
  width: 30% !important;
}

.trans-cla>.el-transfer-panel:last-child {
  width: 50% !important;

  .el-transfer-panel__body {
    .el-checkbox-group {
      .el-checkbox {
        margin-bottom: 10px;
      }
    }
  }
}

.trans-cla {
  position: relative;
  width: 100%;

  .el-transfer-panel {
    // width: 50%;

    .el-transfer-panel__header {
      .el-checkbox {
        .el-checkbox__label {
          font-size: 14px;
        }
      }
    }
  }

  .el-transfer__buttons {
    padding: 0 10px;
  }
}
</style>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}
</style>